<template>
  <div class="het-panel">
    <HETTable ref="temTable" :config="temConfig"></HETTable>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mAxios, encodeURL } from '~/utils/axios/axios.js'
import { genFileId } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()
const id = route.query?.id
const temTable = ref()
const temConfig = ref({
  module: '',
  selectApi: params =>
    mAxios.get('vuln', {
      params
    }),
  search: {
    form: { tempId: id },
    config: [
      {
        label: '',
        prop: 'cveId',
        type: 'input',
        style: { width: '160px' },
        setting: { placeholder: 'CVE' }
      },
      {
        label: '',
        prop: 'vulnName',
        type: 'input',
        style: { width: '160px' },
        setting: { placeholder: '漏洞名称' }
      },
      {
        label: '',
        prop: 'vulnType',
        type: 'select',
        style: { width: '160px' },
        setting: { placeholder: '漏洞类型' },
        options: [
          { label: '系统漏洞', value: '系统漏洞' },
          { label: '数据库漏洞', value: '数据库漏洞' },
          { label: '应用漏洞', value: '应用漏洞' }
        ]
      },
      {
        label: '',
        prop: 'severity',
        type: 'select',
        style: { width: '160px' },
        setting: { placeholder: '漏洞等级' },
        options: [
          { label: '严重', value: 'SERIOUS' },
          { label: '高危', value: 'HIGH' },
          { label: '中危', value: 'MEDIUM' },
          { label: '低危', value: 'LOW' },
          { label: '信息', value: 'INFO' }
        ]
      },
      {
        label: '',
        prop: 'status',
        type: 'select',
        style: { width: '160px' },
        setting: { placeholder: '漏洞状态' },
        options: [
          { label: '待处理', value: '待处理' },
          { label: '处理中', value: '处理中' },
          { label: '已修复', value: '已修复' }
        ]
      },
      {
        label: '',
        prop: 'timeRange',
        type: 'date-picker',
        setting: {
          type: 'datetimerange',
          rangeSeparator: '到',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间'
        }
      }
    ]
  },
  columns: [
    { type: 'selection', width: 34 },
    {
      label: '漏洞名称',
      prop: 'vulnName'
    },
    {
      label: '描述',
      prop: 'description',
      width: 300
    },
    {
      label: '漏洞影响',
      prop: 'affectedProduct'
    },
    // {
    //   label: '漏洞类型',
    //   prop: 'vulnType'
    // },
    {
      label: '漏洞等级',
      prop: 'severity',
      formatter: row => {
        switch (row.severity) {
          case 'INFO':
            return '信息'
          case 'LOW':
            return '低危'
          case 'MEDIUM':
            return '中危'
          case 'HIGH':
            return '高危'
          default:
            return '严重'
        }
      }
    },
    {
      label: 'cvss评分',
      prop: 'baseScore'
    },
    {
      label: '参考',
      prop: 'reference'
    },
    {
      label: '修复建议',
      prop: 'suggestion'
    },
    {
      label: '发现时间',
      prop: 'publishTime',
      width: 200
    }
  ],
  controlBtns: []
})
</script>

<style lang="scss" scoped>
.tip {
  margin-top: 5px;
  color: red;
}
</style>
